<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- import Vue3 -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import element-plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import element-plus JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- axios的引入 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }

        .el-header,
        .el-footer {
            background-color: #b3c0d1;
            color: var(--el-text-color-primary);
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #d3dce6;
            color: var(--el-text-color-primary);
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #e9eef3;
            color: var(--el-text-color-primary);
            text-align: center;
            line-height: 160px;
        }

        body>.el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .scrollbar-demo-item {
            background-color: #b3c0d1;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>Header</el-header>
            <el-main>
                <el-button @click="add">Add Item</el-button>
                <el-button @click="onDelete">Delete Item</el-button>
                <el-scrollbar max-height="400px">
                    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
                        {{ item }}
                    </p>
                </el-scrollbar>


                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="Activity name" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="Activity zone" prop="region">
                        <el-select v-model="ruleForm.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai"></el-option>
                            <el-option label="Zone two" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="Activity time" required>
                        <el-col :span="11">
                            <el-form-item prop="date1">
                                <el-date-picker v-model="ruleForm.date1" type="date" placeholder="Pick a date"
                                    style="width: 100%"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="date2">
                                <el-time-picker v-model="ruleForm.date2" placeholder="Pick a time" style="width: 100%">
                                </el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="Instant delivery" prop="delivery">
                        <el-switch v-model="ruleForm.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="Activity type" prop="type">
                        <el-checkbox-group v-model="ruleForm.type">
                            <el-checkbox label="Online activities" name="type"></el-checkbox>
                            <el-checkbox label="Promotion activities" name="type"></el-checkbox>
                            <el-checkbox label="Offline activities" name="type"></el-checkbox>
                            <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="Resources" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="Sponsorship"></el-radio>
                            <el-radio label="Venue"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="Activity form" prop="desc">
                        <el-input v-model="ruleForm.desc" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
                        <el-button @click="resetForm('ruleForm')">Reset</el-button>
                    </el-form-item>
                </el-form>
                <div>
                    <div class="slider-demo-block">
                        <span class="demonstration">Default value</span>
                        <el-slider v-model="value1"></el-slider>
                      </div>
                      <div class="slider-demo-block">
                        <span class="demonstration">Customized initial value</span>
                        <el-slider v-model="value2"></el-slider>
                      </div>
                      <div class="slider-demo-block">
                        <span class="demonstration">Hide Tooltip</span>
                        <el-slider v-model="value3" :show-tooltip="false"></el-slider>
                      </div>
                      <div class="slider-demo-block">
                        <span class="demonstration">Format Tooltip</span>
                        <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
                      </div>
                      <div class="slider-demo-block">
                        <span class="demonstration">Disabled</span>
                        <el-slider v-model="value5" disabled></el-slider>
                      </div>
                </div>
            </el-main>
        </el-container>

    </div>
</body>



<script>
    const app = Vue.createApp({
        data() {
            return {
                count: 3,
                ruleForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: '',
                },
                rules: {
                    name: [
                        {
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur',
                        },
                        {
                            min: 3,
                            max: 5,
                            message: 'Length should be 3 to 5',
                            trigger: 'blur',
                        },
                    ],
                    region: [
                        {
                            required: true,
                            message: 'Please select Activity zone',
                            trigger: 'change',
                        },
                    ],
                    date1: [
                        {
                            type: 'date',
                            required: true,
                            message: 'Please pick a date',
                            trigger: 'change',
                        },
                    ],
                    date2: [
                        {
                            type: 'date',
                            required: true,
                            message: 'Please pick a time',
                            trigger: 'change',
                        },
                    ],
                    type: [
                        {
                            type: 'array',
                            required: true,
                            message: 'Please select at least one activity type',
                            trigger: 'change',
                        },
                    ],
                    resource: [
                        {
                            required: true,
                            message: 'Please select activity resource',
                            trigger: 'change',
                        },
                    ],
                    desc: [
                        {
                            required: true,
                            message: 'Please input activity form',
                            trigger: 'blur',
                        },
                    ],
                },
            }
        },
        create() {

        },
        methods: {
            add() {
                this.count++
            },
            onDelete() {
                if (this.count > 0) {
                    this.count--
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!')
                        // ElMessage.success('submit!')
                    } else {
                        console.log('error submit!!')
                        // ElMessage.error('submit failed')
                        return false
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
            },
        }
    });
    
    app.use(ElementPlus)
    app.mount("#app")
</script>

</html>